<template>
  <div class="device-detail-page">
    <el-card class="main-card">
      <el-row :gutter="120">
        <el-col :xs="24"
                :sm="24"
                :md="24"
                :lg="14"
                :xl="10"
                style="margin-bottom: 50px">
          <el-descriptions :column="1"
                           border
                           style="margin-bottom: 50px">
            <!-- 设备模式-->
            <el-descriptions-item :labelStyle="statusColor">
              <template slot="label">
                <i class="el-icon-menu"></i>
                {{ $t('device.running-status.866086-0') }}
              </template>
              <el-link :underline="false"
                       style="line-height: 28px; font-size: 16px; padding-right: 10px">{{ title }}</el-link>
            </el-descriptions-item>
            <!-- 设备升级-->
            <el-descriptions-item :labelStyle="statusColor">
              <template slot="label">
                <svg-icon icon-class="ota" />
                {{ $t('device.running-status.866086-1') }}
              </template>
              <el-link :underline="false"
                       style="line-height: 28px; font-size: 16px; padding-right: 10px">Version {{ deviceInfo.firmwareVersion }}</el-link>
              <el-button type="success"
                         size="mini"
                         style="float: right"
                         @click="getLatestFirmware(deviceInfo.deviceId)"
                         :disabled="deviceInfo.status != 3">
                {{ $t('device.running-status.866086-2') }}
              </el-button>
            </el-descriptions-item>

            <!-- 设备物模型-->
            <el-descriptions-item v-for="(item, index) in deviceInfo.thingsModels"
                                  :key="index"
                                  :labelStyle="statusColor">
              <template slot="label">
                <i class="el-icon-open"></i>
                {{ item.name }}
              </template>
              <div v-if="item.datatype.type == 'bool'">
                <el-switch v-model="item.shadow"
                           @change="mqttPublish(deviceInfo, item)"
                           active-text=""
                           inactive-text=""
                           :disabled="shadowUnEnable || item.isReadonly == 1"
                           active-value="1"
                           inactive-value="0"
                           style="min-width: 100px" />
              </div>
              <div v-if="item.datatype.type == 'enum'">
                <div v-if="item.datatype.showWay && item.datatype.showWay == 'button'">
                  <el-button style="margin: 5px"
                             size="mini"
                             @click="enumButtonClick(deviceInfo, item, subItem.value)"
                             v-for="subItem in item.datatype.enumList"
                             :key="subItem.value"
                             :disabled="shadowUnEnable || item.isReadonly == 1">
                    {{ subItem.text }}
                  </el-button>
                </div>
                <el-select v-else
                           v-model="item.shadow"
                           :placeholder="$t('device.running-status.866086-3')"
                           :disabled="shadowUnEnable || item.isReadonly == 1"
                           @change="mqttPublish(deviceInfo, item)">
                  <el-option v-for="subItem in item.datatype.enumList"
                             :key="subItem.value"
                             :label="subItem.text"
                             :value="subItem.value" />
                </el-select>
              </div>
              <div v-if="item.datatype.type == 'string'">
                <el-input v-model="item.shadow"
                          :disabled="shadowUnEnable || item.isReadonly == 1"
                          :placeholder="item.datatype.unit ? $t('device.running-status.866086-5', [item.datatype.unit]) : $t('device.running-status.866086-4')">
                  <el-button slot="append"
                             icon="el-icon-s-promotion"
                             @click="mqttPublish(deviceInfo, item)"
                             v-if="!shadowUnEnable && item.isReadonly == 0"
                             :title="$t('device.running-status.866086-6')"
                             style="font-size: 20px"></el-button>
                </el-input>
              </div>
              <div v-if="item.datatype.type == 'decimal'">
                <div style="width: 80%; float: left">
                  <el-slider v-model="item.shadow"
                             :min="item.datatype.min"
                             :max="item.datatype.max"
                             :disabled="shadowUnEnable || item.isReadonly == 1"
                             :format-tooltip="(x) => x + ' ' + item.datatype.unit"
                             :step="item.datatype.step"></el-slider>
                </div>
                <div style="width: 20%; float: left">
                  <el-button icon="el-icon-s-promotion"
                             type="info"
                             @click="mqttPublish(deviceInfo, item)"
                             v-if="!shadowUnEnable && item.isReadonly == 0"
                             :title="$t('device.running-status.866086-6')"
                             style="font-size: 16px; padding: 1px 8px; margin: 2px 0 0 5px; border-radius: 3px"></el-button>
                </div>
              </div>
              <div v-if="item.datatype.type == 'integer'">
                <div style="width: 80%; float: left">
                  <el-slider v-model="item.shadow"
                             :min="item.datatype.min"
                             :max="item.datatype.max"
                             :disabled="shadowUnEnable || item.isReadonly == 1"
                             :format-tooltip="(x) => x + ' ' + item.datatype.unit"
                             :step="item.datatype.step"></el-slider>
                </div>
                <div style="width: 20%; float: left">
                  <el-button icon="el-icon-s-promotion"
                             type="info"
                             @click="mqttPublish(deviceInfo, item)"
                             v-if="!shadowUnEnable && item.isReadonly == 0"
                             :title="$t('device.running-status.866086-6')"
                             style="font-size: 16px; padding: 1px 8px; margin: 4px 0 0 10px; border-radius: 3px"></el-button>
                </div>
              </div>
              <div v-if="item.datatype.type == 'object'">
                <el-descriptions :column="1"
                                 size="mini"
                                 border>
                  <el-descriptions-item v-for="(param, index) in item.datatype.params"
                                        :key="index"
                                        :label="param.name">
                    <div v-if="param.datatype.type == 'bool'">
                      <el-switch v-model="param.shadow"
                                 @change="mqttPublish(deviceInfo, param)"
                                 active-text=""
                                 :disabled="shadowUnEnable || param.isReadonly == 1"
                                 active-value="1"
                                 inactive-text=""
                                 inactive-value="0"
                                 style="min-width: 100px" />
                    </div>
                    <div v-if="param.datatype.type == 'enum'">
                      <div v-if="param.datatype.showWay && param.datatype.showWay == 'button'">
                        <el-button style="margin: 5px"
                                   size="mini"
                                   v-for="subItem in param.datatype.enumList"
                                   :key="subItem.value"
                                   :disabled="shadowUnEnable || param.isReadonly == 1"
                                   @click="enumButtonClick(deviceInfo, param, subItem.value)">
                          {{ subItem.text }}
                        </el-button>
                      </div>
                      <el-select size="small"
                                 v-else
                                 v-model="param.shadow"
                                 :disabled="shadowUnEnable || param.isReadonly == 1"
                                 :placeholder="$t('device.running-status.866086-3')"
                                 @change="mqttPublish(deviceInfo, param)">
                        <el-option v-for="subItem in param.datatype.enumList"
                                   :key="subItem.value"
                                   :label="subItem.text"
                                   :value="subItem.value" />
                      </el-select>
                    </div>
                    <div v-if="param.datatype.type == 'string'">
                      <el-input v-model="param.shadow"
                                :placeholder="$t('device.running-status.866086-4')"
                                :disabled="shadowUnEnable || param.isReadonly == 1">
                        <el-button slot="append"
                                   icon="el-icon-s-promotion"
                                   @click="mqttPublish(deviceInfo, param)"
                                   v-if="!shadowUnEnable && param.isReadonly == 0"
                                   :title="$t('device.running-status.866086-6')"
                                   style="font-size: 20px"></el-button>
                      </el-input>
                    </div>
                    <div v-if="param.datatype.type == 'decimal'">
                      <el-input v-model="param.shadow"
                                type="number"
                                :placeholder="$t('device.running-status.866086-7')"
                                :disabled="shadowUnEnable || param.isReadonly == 1">
                        <el-button slot="append"
                                   icon="el-icon-s-promotion"
                                   @click="mqttPublish(deviceInfo, param)"
                                   v-if="!shadowUnEnable && param.isReadonly == 0"
                                   :title="$t('device.running-status.866086-6')"
                                   style="font-size: 20px"></el-button>
                      </el-input>
                    </div>
                    <div v-if="param.datatype.type == 'integer'">
                      <el-input v-model="param.shadow"
                                type="integer"
                                :placeholder="$t('device.running-status.866086-8')"
                                :disabled="shadowUnEnable || param.isReadonly == 1">
                        <el-button slot="append"
                                   icon="el-icon-s-promotion"
                                   @click="mqttPublish(deviceInfo, param)"
                                   v-if="!shadowUnEnable && param.isReadonly == 0"
                                   :title="$t('device.running-status.866086-6')"
                                   style="font-size: 20px"></el-button>
                      </el-input>
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <div v-if="item.datatype.type == 'array'">
                <el-descriptions :column="1"
                                 size="mini"
                                 border
                                 v-if="item.datatype.arrayType != 'object'">
                  <el-descriptions-item v-for="(model, index) in item.datatype.arrayModel"
                                        :key="index"
                                        :label="item.name + (index + 1)">
                    <div v-if="item.datatype.arrayType == 'string'">
                      <el-input :placeholder="$t('device.running-status.866086-4')"
                                size="mini"
                                v-model="model.shadow"
                                :disabled="shadowUnEnable || item.isReadonly == 1"
                                @input="arrayItemChange($event, item)">
                        <el-button slot="append"
                                   icon="el-icon-s-promotion"
                                   @click="mqttPublish(deviceInfo, model)"
                                   v-if="!shadowUnEnable || item.isReadonly == 0"
                                   :title="$t('device.running-status.866086-6')"
                                   style="font-size: 20px"></el-button>
                      </el-input>
                    </div>
                    <div v-if="item.datatype.arrayType == 'decimal'">
                      <el-input type="number"
                                :placeholder="$t('device.running-status.866086-7')"
                                size="mini"
                                v-model="model.shadow"
                                :disabled="shadowUnEnable || item.isReadonly == 1"
                                @input="arrayItemChange($event, item)">
                        <el-button slot="append"
                                   icon="el-icon-s-promotion"
                                   @click="mqttPublish(deviceInfo, model)"
                                   v-if="!shadowUnEnable || item.isReadonly == 0"
                                   :title="$t('device.running-status.866086-6')"
                                   style="font-size: 20px"></el-button>
                      </el-input>
                    </div>
                    <div v-if="item.datatype.arrayType == 'integer'">
                      <el-input type="integer"
                                :placeholder="$t('device.running-status.866086-8')"
                                size="mini"
                                v-model="model.shadow"
                                :disabled="shadowUnEnable || item.isReadonly == 1"
                                @input="arrayItemChange($event, item)">
                        <el-button slot="append"
                                   icon="el-icon-s-promotion"
                                   @click="mqttPublish(deviceInfo, model)"
                                   v-if="!shadowUnEnable || item.isReadonly == 0"
                                   :title="$t('device.running-status.866086-6')"
                                   style="font-size: 20px"></el-button>
                      </el-input>
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
                <el-collapse v-if="item.datatype.arrayType == 'object'">
                  <el-collapse-item v-for="(arrayParam, index) in item.datatype.arrayParams"
                                    :key="index">
                    <template slot="title">
                      <span style="color: #666">
                        <i class="el-icon-tickets"></i>
                        {{ item.name + (index + 1) }}
                      </span>
                    </template>
                    <el-descriptions :column="1"
                                     size="mini"
                                     border>
                      <el-descriptions-item v-for="(param, index) in arrayParam"
                                            :key="index"
                                            :label="param.name">
                        <div v-if="param.datatype.type == 'bool'">
                          <el-switch v-model="param.shadow"
                                     @change="mqttPublish(deviceInfo, param)"
                                     active-text=""
                                     :disabled="shadowUnEnable || param.isReadonly == 1"
                                     active-value="1"
                                     inactive-text=""
                                     inactive-value="0"
                                     style="min-width: 100px" />
                        </div>
                        <div v-if="param.datatype.type == 'enum'">
                          <div v-if="param.datatype.showWay && param.datatype.showWay == 'button'">
                            <el-button style="margin: 5px"
                                       size="mini"
                                       v-for="subItem in param.datatype.enumList"
                                       :key="subItem.value"
                                       :disabled="shadowUnEnable || param.isReadonly == 1"
                                       @click="enumButtonClick(deviceInfo, param, subItem.value)">
                              {{ subItem.text }}
                            </el-button>
                          </div>
                          <el-select v-else
                                     v-model="param.shadow"
                                     :placeholder="$t('device.running-status.866086-3')"
                                     :disabled="shadowUnEnable || param.isReadonly == 1"
                                     size="small"
                                     @change="mqttPublish(deviceInfo, param)">
                            <el-option v-for="subItem in param.datatype.enumList"
                                       :key="subItem.value"
                                       :label="subItem.text"
                                       :value="subItem.value" />
                          </el-select>
                        </div>
                        <div v-if="param.datatype.type == 'string'">
                          <el-input v-model="param.shadow"
                                    :placeholder="$t('device.running-status.866086-4')"
                                    :disabled="shadowUnEnable || param.isReadonly == 1">
                            <el-button slot="append"
                                       icon="el-icon-s-promotion"
                                       @click="mqttPublish(deviceInfo, param)"
                                       v-if="!shadowUnEnable && param.isReadonly == 0"
                                       :title="$t('device.running-status.866086-6')"
                                       style="font-size: 20px"></el-button>
                          </el-input>
                        </div>
                        <div v-if="param.datatype.type == 'decimal'">
                          <el-input v-model="param.shadow"
                                    type="number"
                                    :disabled="shadowUnEnable || param.isReadonly == 1"
                                    :placeholder="$t('device.running-status.866086-7')">
                            <el-button slot="append"
                                       icon="el-icon-s-promotion"
                                       @click="mqttPublish(deviceInfo, param)"
                                       v-if="!shadowUnEnable && param.isReadonly == 0"
                                       :title="$t('device.running-status.866086-6')"
                                       style="font-size: 20px"></el-button>
                          </el-input>
                        </div>
                        <div v-if="param.datatype.type == 'integer'">
                          <el-input v-model="param.shadow"
                                    type="integer"
                                    :disabled="shadowUnEnable || param.isReadonly == 1"
                                    :placeholder="$t('device.running-status.866086-8')">
                            <el-button slot="append"
                                       icon="el-icon-s-promotion"
                                       @click="mqttPublish(deviceInfo, param)"
                                       v-if="!shadowUnEnable && param.isReadonly == 0"
                                       :title="$t('device.running-status.866086-6')"
                                       style="font-size: 20px"></el-button>
                          </el-input>
                        </div>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-descriptions-item>
          </el-descriptions>

          <!---设备状态(影子模式，value值不会更新)-->
          <el-descriptions :column="1"
                           border
                           size="mini"
                           v-if="deviceInfo.isShadow == 1 && deviceInfo.status != 3">
            <template slot="title">
              <span style="font-size: 14px; color: #606266">{{ $t('device.running-status.866086-9') }}</span>
            </template>

            <!-- 设备物模型-->
            <el-descriptions-item v-for="(item, index) in deviceInfo.thingsModels"
                                  :key="index">
              <template slot="label">
                <i class="el-icon-open"></i>
                {{ item.name }}
              </template>
              <div v-if="item.datatype.type == 'bool'">
                <el-switch v-model="item.value"
                           @change="mqttPublish(deviceInfo, item)"
                           active-text=""
                           inactive-text=""
                           active-value="1"
                           disabled
                           inactive-value="0"
                           style="min-width: 100px" />
              </div>
              <div v-if="item.datatype.type == 'enum'">
                <div v-if="item.datatype.showWay && item.datatype.showWay == 'button'">
                  <el-button style="margin: 5px"
                             size="mini"
                             disabled
                             v-for="subItem in item.datatype.enumList"
                             :key="subItem.value">{{ subItem.text }}</el-button>
                </div>
                <el-select v-else
                           v-model="item.value"
                           :placeholder="$t('device.running-status.866086-3')"
                           disabled
                           size="mini"
                           @change="mqttPublish(deviceInfo, item)">
                  <el-option v-for="subItem in item.datatype.enumList"
                             :key="subItem.value"
                             :label="subItem.text"
                             :value="subItem.value" />
                </el-select>
              </div>
              <div v-if="item.datatype.type == 'string'">
                <el-input v-model="item.value"
                          :placeholder="$t('device.running-status.866086-4')"
                          disabled
                          size="mini"></el-input>
              </div>
              <div v-if="item.datatype.type == 'decimal'">
                <el-input v-model="item.value"
                          type="number"
                          :placeholder="$t('device.running-status.866086-7')"
                          disabled
                          size="mini"></el-input>
              </div>
              <div v-if="item.datatype.type == 'integer'">
                <el-input v-model="item.value"
                          type="integer"
                          :placeholder="$t('device.running-status.866086-8')"
                          disabled
                          size="mini"></el-input>
              </div>
              <div v-if="item.datatype.type == 'object'">
                <el-descriptions :column="1"
                                 size="mini"
                                 border>
                  <el-descriptions-item v-for="(param, index) in item.datatype.params"
                                        :key="index"
                                        :label="param.name">
                    <div v-if="param.datatype.type == 'bool'">
                      <el-switch v-model="param.value"
                                 size="mini"
                                 @change="mqttPublish(deviceInfo, param)"
                                 active-text=""
                                 active-value="1"
                                 disabled
                                 inactive-text=""
                                 inactive-value="0"
                                 style="min-width: 100px" />
                    </div>
                    <div v-if="param.datatype.type == 'enum'">
                      <el-select v-model="param.value"
                                 :placeholder="$t('device.running-status.866086-3')"
                                 disabled
                                 size="mini"
                                 @change="mqttPublish(deviceInfo, param)">
                        <el-option v-for="subItem in param.datatype.enumList"
                                   :key="subItem.value"
                                   :label="subItem.text"
                                   :value="subItem.value" />
                      </el-select>
                    </div>
                    <div v-if="param.datatype.type == 'string'">
                      <el-input v-model="param.value"
                                :placeholder="$t('device.running-status.866086-4')"
                                disabled
                                size="mini"></el-input>
                    </div>
                    <div v-if="param.datatype.type == 'decimal'">
                      <el-input v-model="param.value"
                                type="number"
                                :placeholder="$t('device.running-status.866086-7')"
                                disabled
                                size="mini"></el-input>
                    </div>
                    <div v-if="param.datatype.type == 'integer'">
                      <el-input v-model="param.value"
                                type="integer"
                                :placeholder="$t('device.running-status.866086-8')"
                                disabled
                                size="mini"></el-input>
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <div v-if="item.datatype.type == 'array'">
                <el-descriptions :column="1"
                                 size="mini"
                                 border
                                 v-if="item.datatype.arrayType != 'object'">
                  <el-descriptions-item v-for="(model, index) in item.datatype.arrayModel"
                                        :key="index"
                                        :label="item.name + (index + 1)">
                    <div v-if="item.datatype.arrayType == 'string'">
                      <el-input v-model="model.value"
                                :placeholder="$t('device.running-status.866086-4')"
                                size="mini"
                                disabled></el-input>
                    </div>
                    <div v-if="item.datatype.arrayType == 'decimal'">
                      <el-input v-model="model.value"
                                type="number"
                                :placeholder="$t('device.running-status.866086-7')"
                                disabled
                                size="mini"></el-input>
                    </div>
                    <div v-if="item.datatype.arrayType == 'integer'">
                      <el-input v-model="model.value"
                                type="integer"
                                :placeholder="$t('device.running-status.866086-8')"
                                disabled
                                size="mini"></el-input>
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
                <el-collapse v-if="item.datatype.arrayType == 'object'">
                  <el-collapse-item v-for="(arrayParam, index) in item.datatype.arrayParams"
                                    :key="index">
                    <template slot="title">
                      <span style="color: #666">
                        <i class="el-icon-tickets"></i>
                        {{ item.name + (index + 1) }}
                      </span>
                    </template>
                    <el-descriptions :column="1"
                                     size="mini"
                                     border>
                      <el-descriptions-item v-for="(param, index) in arrayParam"
                                            :key="index"
                                            :label="param.name">
                        <div v-if="param.datatype.type == 'bool'">
                          <el-switch v-model="param.value"
                                     @change="mqttPublish(deviceInfo, param)"
                                     active-text=""
                                     active-value="1"
                                     disabled
                                     inactive-text=""
                                     inactive-value="0"
                                     style="min-width: 100px" />
                        </div>
                        <div v-if="param.datatype.type == 'enum'">
                          <el-select v-model="param.value"
                                     :placeholder="$t('device.running-status.866086-3')"
                                     disabled
                                     size="mini"
                                     @change="mqttPublish(deviceInfo, param)">
                            <el-option v-for="subItem in param.datatype.enumList"
                                       :key="subItem.value"
                                       :label="subItem.text"
                                       :value="subItem.value" />
                          </el-select>
                        </div>
                        <div v-if="param.datatype.type == 'string'">
                          <el-input v-model="param.value"
                                    :placeholder="$t('device.running-status.866086-4')"
                                    disabled
                                    size="mini"></el-input>
                        </div>
                        <div v-if="param.datatype.type == 'decimal'">
                          <el-input v-model="param.value"
                                    type="number"
                                    :placeholder="$t('device.running-status.866086-7')"
                                    disabled
                                    size="mini"></el-input>
                        </div>
                        <div v-if="param.datatype.type == 'integer'">
                          <el-input v-model="param.value"
                                    type="integer"
                                    :placeholder="$t('device.running-status.866086-8')"
                                    disabled
                                    size="mini"></el-input>
                        </div>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :xs="24"
                :sm="24"
                :md="24"
                :lg="10"
                :xl="14"
                style="padding-left: 0">
          <!-- 设备监测图表-->
          <el-row :gutter="20"
                  v-if="deviceInfo.chartList.length > 0"
                  style="background-color: #f5f7fa; padding: 20px 10px 20px 10px; border-radius: 15px; margin-right: 5px">
            <el-col :xs="24"
                    :sm="12"
                    :md="12"
                    v-for="(item, index) in deviceInfo.chartList"
                    :key="index">
              <el-card shadow="hover"
                       style="border-radius: 30px; margin-bottom: 20px">
                <div ref="map"
                     style="height: 240px; width: 230px; margin: 0 auto"></div>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <!-- 添加或修改产品固件对话框 -->
    <el-dialog :title="$t('device.running-status.866086-10')"
               :visible.sync="openFirmware"
               width="600px"
               append-to-body>
      <div v-if="firmware == null"
           style="text-align: center; font-size: 16px">
        <i class="el-icon-success"
           style="color: #67c23a"></i>
        {{ $t('device.running-status.866086-11') }}
      </div>
      <el-descriptions :column="1"
                       border
                       size="large"
                       v-if="firmware != null && deviceInfo.firmwareVersion < firmware.version"
                       :labelStyle="{ width: '150px', 'font-weight': 'bold' }">
        <template slot="title">
          <el-link icon="el-icon-success"
                   type="success"
                   :underline="false">{{ $t('device.running-status.866086-12') }}</el-link>
        </template>
        <el-descriptions-item :label="$t('device.running-status.866086-13')">{{ firmware.firmwareName }}</el-descriptions-item>
        <el-descriptions-item :label="$t('device.device-edit.148398-4')">{{ firmware.productName }}</el-descriptions-item>
        <el-descriptions-item :label="$t('device.device-edit.148398-12')">Version {{ firmware.version }}</el-descriptions-item>
        <el-descriptions-item :label="$t('device.running-status.866086-16')">
          <el-link :href="getDownloadUrl(firmware.filePath)"
                   :underline="false"
                   type="primary">{{ getDownloadUrl(firmware.filePath) }}</el-link>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('device.running-status.866086-17')">{{ firmware.remark }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="success"
                   @click="otaUpgrade"
                   v-if="firmware != null && deviceInfo.firmwareVersion < firmware.version">{{ $t('device.running-status.866086-18') }}</el-button>
        <el-button @click="cancel">{{ $t('cancel') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getLatestFirmware } from '@/api/iot/firmware';

import { serviceInvoke } from '@/api/iot/runstatus';

export default {
  name: 'running-status',
  props: {
    device: {
      type: Object,
      default: null,
    },
  },
  watch: {
    // 获取到父组件传递的device后，刷新列表
    device: {
      handler (newVal) {
        if (newVal && newVal.deviceId != 0) {
          if (newVal && newVal.deviceId != 0) {
            this.deviceInfo = newVal;
            this.updateDeviceStatus(this.deviceInfo);
            this.$nextTick(function () {
              this.MonitorChart();
            });
            // 添加message事件监听器
            this.mqttCallback();
          }
        }
      },
    },
  },
  data () {
    return {
      // 控制模块标题
      title: '设备控制 ',
      // 未启用设备影子
      shadowUnEnable: false,
      // 控制项标题背景
      statusColor: {
        background: '#67C23A',
        color: '#fff',
        minWidth: '100px',
      },
      // 最新固件信息
      firmware: {},
      // 打开固件对话框
      openFirmware: false,
      // 遮罩层
      loading: true,
      // 设备信息
      deviceInfo: {
        boolList: [],
        enumList: [],
        stringList: [],
        integerList: [],
        decimalList: [],
        arrayList: [],
        thingsModels: [],
        chartList: [],
      },
      // 监测图表
      monitorChart: [
        {
          chart: {},
          data: {
            id: '',
            name: '',
            value: '',
          },
        },
      ],
      remoteCommand: {},
    };
  },
  created () { },
  methods: {
    /* Mqtt回调处理 */
    mqttCallback () {
      this.$mqttTool.client.on('message', (topic, message, buffer) => {
        let topics = topic.split('/');
        let productId = topics[1];
        let deviceNum = topics[2];
        message = JSON.parse(message.toString());
        if (!message) {
          return;
        }
        if (topics[3] == 'status') {
          console.log('接收到【设备状态-运行】主题：', topic);
          console.log('接收到【设备状态-运行】内容：', message);
          // 更新列表中设备的状态
          if (this.deviceInfo.serialNumber == deviceNum) {
            this.deviceInfo.status = message.status;
            this.deviceInfo.isShadow = message.isShadow;
            this.deviceInfo.rssi = message.rssi;
            this.updateDeviceStatus(this.deviceInfo);
          }
        }
        //兼容设备回复
        if (topics[4] == 'reply') {
          this.$modal.notifySuccess(message);
        }
        if (topic.endsWith('ws/service')) {
          console.log('接收到【物模型】主题1：', topic);
          console.log('接收到【物模型】内容：', message);
          // 更新列表中设备的属性
          if (this.deviceInfo.serialNumber == deviceNum) {
            for (let j = 0; j < message.message.length; j++) {
              let isComplete = false;
              // 设备状态
              for (let k = 0; k < this.deviceInfo.thingsModels.length && !isComplete; k++) {
                if (this.deviceInfo.thingsModels[k].id == message.message[j].id) {
                  // 普通类型(小数/整数/字符串/布尔/枚举)
                  if (this.deviceInfo.thingsModels[k].datatype.type == 'decimal' || this.deviceInfo.thingsModels[k].datatype.type == 'integer') {
                    this.deviceInfo.thingsModels[k].shadow = Number(message.message[j].value);
                  } else {
                    this.deviceInfo.thingsModels[k].shadow = message.message[j].value;
                  }
                  isComplete = true;
                  break;
                } else if (this.deviceInfo.thingsModels[k].datatype.type == 'object') {
                  // 对象类型
                  for (let n = 0; n < this.deviceInfo.thingsModels[k].datatype.params.length; n++) {
                    if (this.deviceInfo.thingsModels[k].datatype.params[n].id == message.message[j].id) {
                      this.deviceInfo.thingsModels[k].datatype.params[n].shadow = message.message[j].value;
                      isComplete = true;
                      break;
                    }
                  }
                } else if (this.deviceInfo.thingsModels[k].datatype.type == 'array') {
                  // 数组类型
                  if (this.deviceInfo.thingsModels[k].datatype.arrayType == 'object') {
                    // 1.对象类型数组,id为数组中一个元素,例如：array_01_gateway_temperature
                    if (String(message.message[j].id).indexOf('array_') == 0) {
                      for (let n = 0; n < this.deviceInfo.thingsModels[k].datatype.arrayParams.length; n++) {
                        for (let m = 0; m < this.deviceInfo.thingsModels[k].datatype.arrayParams[n].length; m++) {
                          if (this.deviceInfo.thingsModels[k].datatype.arrayParams[n][m].id == message.message[j].id) {
                            this.deviceInfo.thingsModels[k].datatype.arrayParams[n][m].shadow = message.message[j].value;
                            isComplete = true;
                            break;
                          }
                        }
                        if (isComplete) {
                          break;
                        }
                      }
                    } else {
                      // 2.对象类型数组，例如：gateway_temperature,消息ID添加前缀后匹配
                      for (let n = 0; n < this.deviceInfo.thingsModels[k].datatype.arrayParams.length; n++) {
                        for (let m = 0; m < this.deviceInfo.thingsModels[k].datatype.arrayParams[n].length; m++) {
                          let index = n > 9 ? String(n) : '0' + k;
                          let prefix = 'array_' + index + '_';
                          if (this.deviceInfo.thingsModels[k].datatype.arrayParams[n][m].id == prefix + message.message[j].id) {
                            this.deviceInfo.thingsModels[k].datatype.arrayParams[n][m].shadow = message.message[j].value;
                            isComplete = true;
                          }
                        }
                        if (isComplete) {
                          break;
                        }
                      }
                    }
                  } else {
                    // 整数、小数和字符串类型数组
                    for (let n = 0; n < this.deviceInfo.thingsModels[k].datatype.arrayModel.length; n++) {
                      if (this.deviceInfo.thingsModels[k].datatype.arrayModel[n].id == message.message[j].id) {
                        this.deviceInfo.thingsModels[k].datatype.arrayModel[n].shadow = message.message[j].value;
                        isComplete = true;
                        break;
                      }
                    }
                  }
                }
              }
              // 图表数据
              for (let k = 0; k < this.deviceInfo.chartList.length; k++) {
                if (this.deviceInfo.chartList[k].id.indexOf('array_') == 0) {
                  // 数组类型匹配,例如：array_00_gateway_temperature
                  if (this.deviceInfo.chartList[k].id == message.message[j].id) {
                    // let shadows = message.message[j].value.split(",");
                    this.deviceInfo.chartList[k].shadow = message.message[j].value;
                    // 更新图表
                    for (let m = 0; m < this.monitorChart.length; m++) {
                      if (message.message[j].id == this.monitorChart[m].data.id) {
                        let data = [
                          {
                            value: message.message[j].value,
                            name: this.monitorChart[m].data.name,
                          },
                        ];
                        this.monitorChart[m].chart.setOption({
                          series: [
                            {
                              data: data,
                            },
                          ],
                        });
                        break;
                      }
                    }
                  }
                } else {
                  // 普通类型匹配
                  if (this.deviceInfo.chartList[k].id == message.message[j].id) {
                    this.deviceInfo.chartList[k].shadow = message.message[j].value;
                    // 更新图表
                    for (let m = 0; m < this.monitorChart.length; m++) {
                      if (message.message[j].id == this.monitorChart[m].data.id) {
                        isComplete = true;
                        let data = [
                          {
                            value: message.message[j].value,
                            name: this.monitorChart[m].data.name,
                          },
                        ];
                        this.monitorChart[m].chart.setOption({
                          series: [
                            {
                              data: data,
                            },
                          ],
                        });
                        break;
                      }
                    }
                  }
                }
                if (isComplete) {
                  break;
                }
              }
            }
          }
        }
      });
    },

    //发送指令
    mqttPublish (device, model) {
      const command = {};
      command[model.id] = model.shadow;
      const data = {
        serialNumber: device.serialNumber,
        productId: device.productId,
        remoteCommand: command,
        identifier: model.id,
        modelName: model.name,
        isShadow: device.status != 3,
        type: model.type,
      };
      serviceInvoke(data).then((response) => {
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: this.$t('device.running-status.866086-25'),
          });
        }
      });
    },

    /**
     * Mqtt发布消息
     * @device 设备
     * @model 物模型(id/name/type/name/isReadonly/value/shadow)，type 类型(1=属性，2=功能，3=OTA升级，4=实时监测)
     * */
    // mqttPublish(device, model) {
    //     let topic = "";
    //     let message = ""
    //     if (model.type == 1) {
    //         if (device.status == 3) {
    //             // 属性,在线模式
    //             topic = "/" + device.productId + "/" + device.serialNumber + "/property-online/get";
    //         } else if (device.isShadow) {
    //             // 属性,离线模式
    //             topic = "/" + device.productId + "/" + device.serialNumber + "/property-offline/post";
    //         }
    //         message = '[{"id":"' + model.id + '","value":"' + model.shadow + '"}]';
    //     } else if (model.type == 2) {
    //         if (device.status == 3) {
    //             // 功能,在线模式
    //             topic = "/" + device.productId + "/" + device.serialNumber + "/function-online/get";
    //
    //         } else if (device.isShadow) {
    //             // 功能,离线模式
    //             topic = "/" + device.productId + "/" + device.serialNumber + "/function-offline/post";
    //         }
    //         message = '[{"id":"' + model.id + '","value":"' + model.shadow + '"}]';
    //     } else if (model.type == 3) {
    //         // OTA升级
    //         topic = "/" + device.productId + "/" + device.serialNumber + "/ota/get";
    //         message = '{"version":' + this.firmware.version + ',"downloadUrl":"' + this.getDownloadUrl(this.firmware.filePath) + '"}';
    //     } else {
    //         return;
    //     }
    //     if (topic != "") {
    //         // 发布
    //         this.$mqttTool.publish(topic, message, model.name).then(res => {
    //             this.$modal.notifySuccess(res);
    //         }).catch(res => {
    //             this.$modal.notifyError(res);
    //         });
    //     }
    // },

    /** 枚举类型按钮单击 */
    enumButtonClick (device, model, value) {
      model.shadow = value;
      this.mqttPublish(device, model);
    },

    /** 更新设备状态 */
    updateDeviceStatus (device) {
      if (device.status == 3) {
        this.statusColor.background = '#12d09f';
        this.title = this.$t('device.running-status.866086-26');
      } else {
        if (device.isShadow == 1) {
          this.statusColor.background = '#409EFF';
          this.title = this.$t('device.running-status.866086-27');
        } else {
          this.statusColor.background = '#909399';
          this.title = this.$t('device.running-status.866086-28');
          this.shadowUnEnable = true;
        }
      }
      this.$emit('statusEvent', this.deviceInfo.status);
    },
    /** 物模型数组元素值改变事件 */
    arrayItemChange (value, thingsModel) {
      let shadow = '';
      for (let i = 0; i < thingsModel.datatype.arrayCount; i++) {
        shadow += thingsModel.datatype.arrayModel[i].shadow + ',';
      }
      shadow = shadow.substring(0, shadow.length - 1);
      thingsModel.shadow = shadow;
    },
    /** 物模型中数组值改变事件 */
    arrayInputChange (value, thingsModel) {
      let arrayModels = value.split(',');
      if (arrayModels.length != thingsModel.datatype.arrayCount) {
        this.$modal.alertWarning(this.$t('device.running-status.866086-29') + thingsModel.datatype.arrayCount + this.$t('device.running-status.866086-30'));
      } else {
        for (let i = 0; i < thingsModel.datatype.arrayCount; i++) {
          thingsModel.datatype.arrayModel[i].shadow = arrayModels[i];
        }
      }
    },
    /**用户是否拥有分享设备权限*/
    // hasShrarePerm(permission) {
    //   if (this.deviceInfo.isOwner == 0) {
    //     // 分享设备权限
    //     if (this.deviceInfo.userPerms.indexOf(permission) == -1) {
    //       return false;
    //     }
    //   }
    //   return true;
    // },
    /** 设备升级 */
    otaUpgrade () {
      // OTA升级
      let topic = '/' + this.deviceInfo.productId + '/' + this.deviceInfo.serialNumber + '/ota/get';
      let message = '{"version":' + this.firmware.version + ',"downloadUrl":"' + this.getDownloadUrl(this.firmware.filePath) + '"}';
      // 发布
      this.$mqttTool
        .publish(topic, message, this.$t('device.running-status.866086-31'))
        .then((res) => {
          this.$modal.notifySuccess(res);
        })
        .catch((res) => {
          this.$modal.notifyError(res);
        });
      this.openFirmware = false;
    },
    /** 获取最新固件 */
    getLatestFirmware (deviceId) {
      getLatestFirmware(deviceId).then((response) => {
        this.firmware = response.data;
        this.openFirmware = true;
      });
    },
    // 取消按钮
    cancel () {
      this.openFirmware = false;
    },
    // 获取下载路径前缀
    getDownloadUrl (path) {
      return window.location.origin + process.env.VUE_APP_BASE_API + path;
    },
    /**图表展示*/
    MonitorChart () {
      console.log('this.deviceInfo.chartList', this.deviceInfo)
      for (let i = 0; i < this.deviceInfo.chartList.length; i++) {
        this.monitorChart[i] = {
          chart: this.$echarts.init(this.$refs.map[i]),
          data: {
            id: this.deviceInfo.chartList[i].id,
            name: this.deviceInfo.chartList[i].name,
            value: this.deviceInfo.chartList[i].shadow ? this.deviceInfo.chartList[i].shadow : this.deviceInfo.chartList[i].datatype.min,
          },
        };
        var option;
        option = {
          tooltip: {
            formatter: ' {b} <br/> {c}' + this.deviceInfo.chartList[i].datatype.unit,
          },
          series: [
            {
              name: this.deviceInfo.chartList[i].datatype.type,
              type: 'gauge',
              min: this.deviceInfo.chartList[i].datatype.min,
              max: this.deviceInfo.chartList[i].datatype.max,
              colorBy: 'data',
              splitNumber: 10,
              radius: '100%',
              // 分割线
              splitLine: {
                distance: 4,
              },
              axisLabel: {
                fontSize: 10,
                distance: 10,
              },
              // 刻度线
              axisTick: {
                distance: 4,
              },
              // 仪表盘轴线
              axisLine: {
                lineStyle: {
                  width: 8,
                  color: [
                    [0.2, '#409EFF'], // 0~20%
                    [0.8, '#12d09f'], // 40~60%
                    [1, '#F56C6C'], // 80~100%
                  ],
                  opacity: 0.3,
                },
              },
              pointer: {
                icon: 'triangle',
                length: '60%',
                width: 7,
              },
              progress: {
                show: true,
                width: 8,
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}' + ' ' + this.deviceInfo.chartList[i].datatype.unit,
                offsetCenter: [0, '72%'],
                fontSize: 16,
              },
              data: [
                {
                  value: this.deviceInfo.chartList[i].shadow ? this.deviceInfo.chartList[i].shadow : this.deviceInfo.chartList[i].datatype.min,
                  name: this.deviceInfo.chartList[i].name,
                },
              ],
              title: {
                offsetCenter: [0, '95%'],
                fontSize: 16,
                text: this.deviceInfo.chartList[i].name,
              },
            },
          ],
        };
        option && this.monitorChart[i].chart.setOption(option);
      }
    },
    chartResize () {
      for (let i = 0; i < this.monitorChart.length; i++) {
        console.log('this.monitorChart', this.monitorChart[i]);

        this.monitorChart[i].chart.resize();
      }
    },
  },
};
</script>

<style>
/* 重写滑动块样式 */
.el-slider__bar {
    height: 18px;
}

.el-slider__runway {
    height: 18px;
    margin: 5px 0;
}

.el-slider__button {
    height: 18px;
    width: 18px;
    border-radius: 10%;
}

.el-slider__button-wrapper {
    top: -9px;
}
</style>
